import { Button, Card, Form, Input, message, Table, Tooltip } from 'antd'
import React, { useEffect, useState } from 'react'
//导入icon图标
import { SearchOutlined, EditOutlined, DeleteOutlined } from '@ant-design/icons';
//导入请求接口函数
import { deleteAllHospitalSet, deleteOneHospitalSet, GetAllHospitalSetListData } from '@api/hospital/hospitalset/index'
//导入类型
import { resHospitalsetLists } from '@/api/hospital/hospitalset/model/hospitalsetType';
//导入路由中的钩子
import { useNavigate } from 'react-router-dom';

export default function HospitalSet() {

    //定义一个状态数据
    let [hospitallist, setHospitallist] = useState<resHospitalsetLists>([]);

    //定义一个状态，用来存储当前是第几页
    let [current, setCurrent] = useState(1);

    //定义一个状态，用来存储每一页显示多少条数据
    let [pageSize, setPageSize] = useState(5);

    //定义一个状态，用来存储总条数
    let [total, setTotal] = useState(0);

    //创建表单实例
    let [form] = Form.useForm();

    //调用useNavigate钩子
    let navigate = useNavigate();

    //既然请求数据可以在初始化的时候显示，或者将来在搜索的时候，清空数据的时候等等这些位置都需要调用请求函数，所以可以单独声明一个函数
    const reqAllHospitalsetList = async () => {
        //所有字段值，无需传递参数
        let { hosname, hoscode } = form.getFieldsValue(); //{hosname: '人民', hoscode: '1001'}

        let result = await GetAllHospitalSetListData({ page: current, limit: pageSize, hosname, hoscode });
        //更新状态，里面的值为records的记录
        setHospitallist(result.records)
        setTotal(result.total);
    }

    //组件挂载完成之后和当状态数据也发生了变化的时候，重新进行ajax请求
    useEffect(() => {
        //调用方法
        reqAllHospitalsetList();
    }, [current, pageSize])

    //声明事件函数--单条删除
    let deleteHospitalset = async (id: number) => {
        // console.log(id);
        try {
            //调用接口函数
            await deleteOneHospitalSet(id);
            message.success('删除医院设置成功');
            //只要是删除成功之后，则重新请求现有的所有数据
            reqAllHospitalsetList();
        } catch (e) {
            message.error('删除医院设置失败');
        }

    }

    //声明事件函数---单条数据显示
    let ModidyHospitalset = (id: number) => {
        //跳转单条路由
        navigate(`edit/${id}`)
    }

    //表格的列
    const columns = [
        {
            title: '序号',
            dataIndex: 'id',
            render: (text: any, records: any, index: number) => {
                return index + 1;
            }
        },
        {
            title: '医院名称',
            dataIndex: 'hosname',
        },
        {
            title: '医院编号',
            dataIndex: 'hoscode',
        },
        {
            title: 'api基础路径',
            dataIndex: 'apiUrl',
        },
        {
            title: '签名',
            dataIndex: 'signKey',
        },
        {
            title: '联系人姓名',
            dataIndex: 'contactsName',
        },
        {
            title: '联系人电话',
            dataIndex: 'contactsPhone',
        },
        {
            title: '操作',
            //自定义的结构使用render回调函数
            render: (text: any, records: any, index: number) => {

                // console.log('当前行的值：', text.id)
                return <>
                    <Tooltip title="编辑">
                        <Button type='primary' icon={<EditOutlined />} onClick={() => ModidyHospitalset(text.id)}></Button>
                    </Tooltip>
                    <Tooltip title="删除">
                        <Button danger type='primary' icon={<DeleteOutlined />} className="ml1" onClick={() => deleteHospitalset(text.id)}></Button>
                    </Tooltip>
                </>
            }
        },
    ];



    //声明事件函数
    let finish = () => {
        //获取表单元素的值
        //单一字段值，需要传入表单项name名称
        // console.log(form.getFieldValue('hosname'))

        //如果在已经搜索过的条件之上点击了分页，则在搜索，是在该分页基础之上来查看搜索条件是否存在

        //解决思路：如果当前不是第一页，则我们将页数更正成第一页，只要是第一页我们就正常的搜索

        if (current === 1) {
            //调用方法
            reqAllHospitalsetList();
        } else {
            setCurrent(1);
        }
    }

    //完成清空的功能
    let reset = () => {
        //重新将之前请求的结果还原

        if (current === 1) {
            //调用方法
            reqAllHospitalsetList();
        } else {
            setCurrent(1);
        }
    }

    //实现添加的方法
    let add = () => {
        //现在访问的路径：/syt/hospital/hospitalset
        //完整路径
        // navigate('/syt/hospital/hospitalset/add');

        //路由的追加方式
        navigate('add');

        //绝对地址
        // navigate('/add');
    }

    //将用户选择的每一行id值存储一个状态数组中
    const [selectedRowKeys, setSelectedRowKeys] = useState<React.Key[]>([]);

    //根据存储的key值数组的长度来决定批量删除的禁用状态
    const hasSelected = selectedRowKeys.length > 0;

    const onSelectChange = (ids: React.Key[]) => {
        //将所有选择的id值更新到状态数组里面
        setSelectedRowKeys(ids)
    };

    //配置复选框的选项(记录用户所选择的复选框以及onchange事件)
    const rowSelection = {
        selectedRowKeys,
        onChange: onSelectChange,
    };

    //声明事件函数
    let deleteAll = async () => {
        try {
            //调用函数
            await deleteAllHospitalSet(selectedRowKeys);
            message.success('批量删除医院设置成功');
            //重新请求现有的所有数据
            reqAllHospitalsetList();
        } catch (e) {
            message.error('批量删除医院设置失败');
        }
    }

    return (
        <Card>
            {/* 表单的搜索 */}
            <Form name="basic" autoComplete="off" layout='inline' onFinish={finish} form={form} onReset={reset}>
                <Form.Item name="hosname">
                    <Input placeholder='医院名称' />
                </Form.Item>

                <Form.Item name="hoscode">
                    <Input placeholder='医院编号' />
                </Form.Item>

                <Form.Item>
                    <Button type="primary" htmlType="submit" icon={<SearchOutlined />}>
                        查询
                    </Button>
                </Form.Item>
                <Form.Item>
                    <Button htmlType="reset">
                        清空
                    </Button>
                </Form.Item>
            </Form>
            <div className='h-20'></div>
            {/* 操作按钮 */}
            <div>
                <Button type='primary' onClick={add}>添加</Button>
                <Button className='ml' disabled={!hasSelected} onClick={deleteAll}>批量删除</Button>
            </div>
            <div className='h-20'></div>
            {/* 表格 */}
            <Table
                //数据源
                dataSource={hospitallist}
                //列
                columns={columns}
                //key值
                rowKey='id'
                //是否显示列表框以及表格表框
                bordered
                //分页配置
                pagination={{
                    //当前页数
                    current,
                    //每页显示多少条
                    pageSize,
                    //总数
                    total,
                    //每页显示多少条
                    pageSizeOptions: [5, 10, 15, 20],
                    //快速跳转到某页
                    showQuickJumper: true,
                    //是否显示分页下拉列表
                    showSizeChanger: true,
                    //是否显示总数
                    showTotal: (total: number) => {
                        return `总共${total}条`
                    },
                    //当数字分页和下拉列表分页数据发生了变化的时候
                    onChange: (page: number, pageSize: number) => {
                        //更新点击的数字分页，将这个数值更新到状态数据里面
                        setCurrent(page);
                        setPageSize(pageSize)
                    }
                }}
                //表格复选框
                rowSelection={rowSelection}
            />
        </Card>
    )
}
